var sx = null;

function sxTable() {
    sx.reload()
}



layui.use(['table','form','element'],function() {
    var table = layui.table;
    var form = layui.form;
    var element = layui.element;


    //监听顶部刷新按钮
    form.on('submit(sx)',function (d){
        location.reload();
    })

    //鉴定顶部返回按钮
    form.on('submit(fh)',function (d){
        layer.msg('返回上一级页面')
    })


    //监听顶部搜索按钮
    form.on('submit(*)',function (d){
        var data = d.field;
        sx.reload({
            where:{
                discountsName:data.discountsName,
                discountsType:data.discountsType,
                discountsQuantity:data.discountsQuantity
            }
        },true);
        return false
    })

    //监听顶部重置按钮
    form.on('submit(cz)',function (d){
        var data = d.field

        $("[name = discountsType]").val('')
        $("[name=discountsQuantity]").val('')
        $("[name=discountsName]").val(undefined)
        form.render()
        sx.reload({
            url:'/getCouponList',
            where:{
                discountsName:null,
                discountsType:null,
                discountsQuantity:null
            }
        },true)
        return false
    })


    sx = table.render({
        elem: '#demo',
        url: '/getCouponList',//数据接口
        page: {
            layout: ['count', 'prev', 'page', 'next', 'limit'],//展示按钮 以及按钮的顺序
            groups: 5,
            limit: 5,// 每条的页数
            limits: [5, 10, 20] // 可选的每条的页数
        },
        cols: [
            [
                {field: 'discountsId', title: '序号',width: 85,align: 'center'},
                {field: 'discountsName', title: '优惠券名称',width: 120,align: 'center'},
                //页面获取图片样子
                {field: "discountsPicture", title: "优惠券图片",width:180,align: 'center', templet:function (d){
                    return '<img src="http://43.143.176.39/'+ d.discountsPicture +' " width="100px" height="100px" style="border-radius: 30px"; border="2 solid blue" > '
                }},
                {field: 'discountsQuantity', title: '优惠卷状态',width: 120,align: 'center',templet: function(row){
                    //根据数据库的值判断上架或者下架
                        //lay-skin="switch"：设置按钮现状
                        var str = '<a lay-event="required">';
                        if(row.discountsQuantity == '1'){
                            str += '<input type="checkbox" name="discountsQuantity" lay-skin="switch" lay-text="上架|下架" checked>';
                        }else if(row.discountsQuantity == '2'){
                            str += '<input type="checkbox" name="discountsQuantity" lay-skin="switch" lay-text="上架|下架">';
                        }
                        str += '</a>';
                        return str;
                    }
                },
                {field: 'discountsType', title: '优惠卷类型',width: 150,align: 'center',templet: function (d){
                    if(d.discountsType == '商品'){
                        return '<i class="layui-icon layui-icon-component" style="font-size: 25px; color: #01AAED;"></i>  '
                    }else if(d.discountsType == '视频') {
                        return '<i class="layui-icon layui-icon-video" style="font-size: 25px; color: #01AAED;"></i>  '
                    }else{
                        return '<i class="layui-icon layui-icon-diamond" style="font-size: 25px; color: #01AAED;"></i>  '
                    }
                }},
                {field: 'discountsOriginal', title: '发行数量',width: 120,align: 'center'},
                {field: 'bfb', title: '剩余数量',width: 300,align: 'center',
                templet: function (d){
                    //***重点***：判断颜色
                    var ys = '';
                    if(30 < d.bfb && d.bfb < 100){
                        ys = 'layui-bg-orange'
                    }else if(0 < d.bfb && d.bfb <= 30){
                        ys = 'layui-bg-red'
                    }
                    //***重点***：拼接进度条
                    return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar '+ ys +'" lay-percent="'+ d.bfb +'%"></div></div>'
                }},
                {field: 'discountsFinish', title: '开始时间',width: 180,align: 'center'},
                {field: 'discountsWire', title: '结束时间',width: 180,align: 'center'},
                {toolbar: '#tooldemo', width: 80,title: '操作',align: 'center'}
            ]
        ],
        parseData: function (res) {
            return {
                "code": res.code,
                "msg": res.msg,
                "count": res.count,
                "data": res.data
            }
        },
        skin: 'line',
        toolbar: '#toolbarbtn',
        //***重点***：***重点***：***重点***：如果没有这一步，进度条是不会生效的。应为table渲染之后没有渲染element
        done:function (res,currentCount) {
            //***重点***：table渲染完成后渲染element进度条
            element.render()
        }
    })



    //查看详细信息
    table.on('tool(userdemo)', function (obj) {
        var e = obj.event,
            data = obj.data;
        if (obj.event === 'ck') {
            layer.open({
                type: 2,
                title: '查看优惠券信息',
                content: 'examine.html',
                shade:[1,'#37444B'],
                anim:4,
                area: ['90%', '90%'],
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find('#discountsName').text(obj.data.discountsName);
                    body.find('#discountsPicture').attr('src', 'http://43.143.176.39/' + obj.data.discountsPicture);
                    body.find('#discountsTicket').text(obj.data.discountsTicket);
                    body.find('#discountsBegin').text(obj.data.discountsBegin);
                    body.find('#discountsFinish').text(obj.data.discountsFinish);
                    body.find('#discountsWire').text(obj.data.discountsWire);
                    body.find('#discountsQuantity').text(obj.data.discountsQuantity);
                    body.find('#discountsAmount').text(obj.data.discountsAmount);
                    body.find('#discountsManner').text(obj.data.discountsManner);
                    body.find('#discountsType').text(obj.data.discountsType);
                    body.find('#discountsRemark').text(obj.data.discountsRemark);
                }
            })
        }else if(obj.event === 'required'){
            // alert("序号:"+data.discountsId+"是否启用:"+data.discountsQuantity);
            //判断切换一和二（修改上架还是下架）
            switch (data.discountsQuantity) {
                case 1:
                    qy(2);
                    break;
                case 2:
                    qy(1);
                    break;
            }
        }
        //修改上架还是下架
        function qy(sta) {
            $.ajax({
                type:"post",
                url:'/upCouponState',
                data: {"discountsId":data.discountsId,"discountsQuantity":sta},
                dataType:'json',
                success:function (res) {
                    if (res.state == '200'){
                        layer.msg('更改状态成功',{time:1500,icon:6})
                    }
                    else {
                        layer.msg('更改状态失败',{time:1500,icon:5})
                    }
                },
                error:function(e){
                    console.log("异常");
                }

            })
        }

    })

    //跳转添加页面
    table.on('toolbar(userdemo)', function (obj) {
        var event = obj.event;
        if (event === 'add') {
            layer.open({
                type: 2,
                title: '添加优惠券',
                content: 'addition.html',
                shade:[1,'#37444B'],
                anim:4,
                area: ['90%', '90%']
            })
        }
    })

})

